<template>
  <VDialog
    @close="handleClose"
    @save="save"
    :loading="loading"
    :disabled="bankDisabled"
  >
    <template #content>
      <div>
        <el-form
          ref="formRef"
          :model="formValues"
          :rules="rules"
          label-position="top"
        >
          <el-form-item label="公司名称" prop="companyName">
            <el-input
              v-model.trim="formValues.companyName"
              placeholder="英文公司名称"
              :disabled="bankDisabled"
              clearable
            />
          </el-form-item>
          <el-form-item label="注册地" prop="nation">
            <VGroup class="w-[100%]">
              <el-input
                v-model.trim="formValues.nation"
                placeholder="英文国家"
                clearable
                :disabled="bankDisabled"
                class="w-[100%]"
              />
              <el-input
                v-model.trim="formValues.city"
                placeholder="英文城市"
                clearable
                :disabled="bankDisabled"
                class="w-[100%]"
              />
            </VGroup>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model.trim="formValues.address"
              placeholder="英文详细地址"
              :disabled="bankDisabled"
              clearable
            />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="邮编" prop="postCode">
                <el-input
                  v-model.trim="formValues.postCode"
                  placeholder="邮编"
                  :disabled="bankDisabled"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model.trim="formValues.email"
                  placeholder="邮箱"
                  :disabled="bankDisabled"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </VDialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { addBankProve, editBankProve, getBankProveDetail } from "../api.js";
const props = defineProps({
  data: { type: Object, default: null },
});
const rules = reactive({
  companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  nation: [{ required: true, message: "请输入国家", trigger: "blur" }],
  city: [{ required: true, message: "请输入城市", trigger: "blur" }],
  address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  postCode: [{ required: true, message: "请输入邮编", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
});
const bankDisabled = ref(false);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formValues = ref({
  id: null,
  companyName: null,
  nation: null,
  city: null,
  address: null,
  postCode: null,
  email: null,
  accountSubsetId: null,
});
watch(
  () => props.data,
  (val) => {
    if (!val) return;
    const { id, accountSubsetId, ind } = val;
    bankDisabled.value = ind == 1 ? true : false;
    if (id == 0) {
      formValues.value.id = id == 0 ? null : id;
      formValues.value.accountSubsetId = accountSubsetId;
    } else {
      getDetails(id, val);
    }
  }
);
const getDetails = async (id, val) => {
  const { data } = await getBankProveDetail({ id });
  let form = Object.assign({}, val, data);
  for (let key in form) {
    formValues.value[key] = form[key];
  }
};
const formRef = ref();
const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        if (!formValues.value?.city) return ElMessage.error("城市不能为空!");
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editBankProve
          : addBankProve)(formValues.value);
        if (code !== 200) return;
        ElMessage.success("操作成功");
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};
const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    companyName: null,
    nation: null,
    city: null,
    address: null,
    postCode: null,
    email: null,
    accountSubsetId: null,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
